<template>
	<view class="big">
		<view class="trade">
			<view class="texts" :class="curr==0?'active':''" data-index="0" @tap="setCurr">
				招募总览
			</view>
			<view class="texts" :class="curr==1?'active':''" data-index="1" @tap="setCurr">
				发布招募
			</view>
		</view>
		<swiper style="height: 96vh;" :current="curr" @change="setCurr">
			<swiper-item>
				<scroll-view>
					<view class="search">
						<input class="search_in" v-model="search" type="text" value="" @input="messagesearch" placeholder="搜索需要队友的活动"/>
						<view class="search_but">
							<button type="default">搜索</button>
						</view>
					</view>
					<view class="bhome">
						<!-- <view class="second_box" style="position: fixed;top: 5%;">
							<view class="second_box_third" style="background-color: rgb(244,244,244);height: 100%;">
								<view class="third_box" style="background-color: rgb(244,244,244);">通知名称</view>
								<view class="Vertical_line"></view>
								<view class="third_box" style="background-color: rgb(244,244,244);">负责单位</view>
								<view class="Vertical_line"></view>
								<view class="third_box" style="background-color: rgb(244,244,244);">通知截至时间</view>
								<view class="Vertical_line"></view>
								<view class="third_box" style="background-color: rgb(244,244,244);">操作</view>
							</view>
						</view> -->
						<view class="bigbox" style="overflow:auto;">
							<block v-for="(item,index) in res.data.data">
								<view class="item">
									<view class="info">
										<view class="activity_title">{{item.name}}</view>
										<view class="activity_resp">
											<view class="title">负责单位</view>{{item.sponsor}}
										</view>
										<view class="activity_deadline">
											<view class="title">招募截至</view>{{item.endTime}}
										</view>
									</view>
										
									<view class="item_btn">
										<view class="apply">
											<navigator @click="joinActive(item.id)">报名</navigator>
										</view>
										<view class="detail">
											<navigator :url="'./huodong_detail?id='+item.id">详情</navigator>
										</view>
									</view>
								</view>
							</block>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view>
					<view class="bigbox1">
						<view class="time_and_unit">
							<view class="title">
								<input class="nameInput" v-model="name" type="text" value=""  placeholder="输入招募标题"/>
							</view>
							<view class="tandu">
								<view class="cent">
									<view class="unit">
										<view class="lab">
											<label>招募时间:</label>
										</view>
										<view class="ins">
											<view class="bgtime">
												<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
												<input @click="open" v-model="beginTime" type="text" value=""  disabled/>
											</view>
											<view style="width: 16rpx;">-</view>
											<view class="edtime">
												<uni-calendar ref="calendar1" :insert="false" @confirm="confirm1" />
												<input @click="open1" v-model="endTime" type="text" value=""  disabled/>
											</view>
										</view>
									</view>
								</view>
								<view class="cent">
									<view class="unit">
										<view class="lab">
											<label>负责单位:</label>
										</view>
										<view class="ins">
											<input v-model="sponsor" type="text" value="" style="width: 70%;"/>
										</view>
									</view>
								</view>
								<view class="cent">
									<view class="unit">
										<view class="lab">
											<label>联系方式:</label>
										</view>
										<view class="ins">
											<input v-model="phone" type="text" value="" style="width: 70%;"/>
										</view>
									</view>
								</view>
								<view class="cent">
									<view class="unit">
										<view class="lab">
											<label>类 型:</label>
										</view>
										<view class="ins">
											<input v-model="type" type="text" value="" style="width: 70%;"/>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="labels">
							<view class="cent1">
								<view class="lab" v-for="(item1,index1) in item.labels">{{item1}}</view>
							</view>
						</view> -->
						<view style="margin-top: 50rpx;background-color: #ffffff;border-radius: 20rpx;">
							<view>
								<view class="unit" style="margin-bottom: 30rpx;margin-top: 20rpx;">
									<view class="lab">
										<label>文件详情:</label>
									</view>
									<view style="width: 70%;"></view>
								</view>
								<view class="details">
									<textarea v-model="centent" placeholder="输入招募内容详情"></textarea>
								</view>
							</view>
							<view class="startzhaomu">
								<button @click="recruit()">开始招募</button>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>			
		</swiper>
	</view>
</template>


<script>
	// import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				curr:0,
				res:{},
				pes:{},
				timer:null,
				name:'',
				phone:'',
				no:'',
				type:'123',
				centent:'',
				beginTime:'',
				endTime:'',
				sponsor:'',
			}
		},
		onShow() {
			uni.getSystemInfo({
				success: (res) => {
					// let height = res.windowHeight - uni.upx2px(100)
					// this.swiperheight = height;
				}
			})
			uni.request({
				url:'http://120.77.247.146:8080/recruitingPlayers/finAll',
				success: (res) => {
					this.res=res,
					console.log("刷新了")
				}
			})
			// this.timer=timsetInterval(()=>{
			// 	uni.request({
			// 		url:'http://124.222.175.145:8080/recruitingPlayers/finAll',
			// 		success: (res) => {
			// 			this.res=res
			// 		}
			// 	})
			// },1000)
		},
		methods: {
			recruit(){
				if(this.name==''){
					uni.showToast({
						title:'标题不能为空',
						icon:'error',
					})
				}
				else if(this.beginTime==''||this.endTime==''){
					uni.showToast({
						title:'时间不能为空',
						icon:'error',
					})
				}
				else if(this.sponsor==''){
					uni.showToast({
						title:'负责单位不能为空',
						icon:'error',
					})
				}
				else if(this.phone==''){
					uni.showToast({
						title:'联系方式不能为空',
						icon:'error',
					})
				}
				else if(this.centent==''){
					uni.showToast({
						title:'详情内容不能为空',
						icon:'error',
					})
				}
				else{
					// var kes={"beginTime": this.beginTime,
					// 		  "content": this.centent,
					// 		  "endTime": this.endTime,
					// 		  "id": 0,
					// 		  "name": this.name,
					// 		  "phone": this.phone,
					// 		  "place": "none",
					// 		  "sponsor": this.sponsor,
					// 		  "type": this.type};
					// console.log(kes);
					uni.showModal({
						title:'提醒',
						content:'确定发布招募吗',
						success: (sn) => {
							if(sn.confirm){
								uni.getStorage({
									key:'student',
									success: (no) => {
										this.no=no.data.no,
										console.log(this.no+"!!!!!!!"),
										uni.request({
											url:'http://120.77.247.146:8080/recruitingPlayers/publishPlayers',
											method:'POST',
											data:{
												  "beginTime": this.beginTime,
												  "content": this.centent,
												  "endTime": this.endTime,
												  "id": 0,
												  "name": this.name,
												  "phone": this.phone,
												  "place": "none",
												  "sponsor": this.sponsor,
												  "type": this.type,
												  "no":this.no
												},
											success: (pes) => {
												// this.pes=pes,
												if(pes.data.resultCode==200){
													uni.showToast({
														title:'发布成功!'
													})
												}
											}
										})
									}
								})
							}
						}
						
					})
				}
			},
			refresh(){
				uni.request({
					url:'http://120.77.247.146:8080/recruitingPlayers/finAll',
					success: (res) => {
						this.res=res,
						console.log("刷新了")
					}
				})
			},
			open() {
				this.$refs.calendar.open();
			},
			open1() {
				this.$refs.calendar1.open();
			},
			confirm(e) {
				this.beginTime = e.fulldate
			},
			confirm1(e){
				this.endTime = e.fulldate
			},
			joinActive(id){
				// uni.getStorage({
				// 	key:'student',
				// 	success: (no) => {
				// 		this.no=no
				// 	}
				// })
				// uni.request({
				// 	url:'http://120.77.247.146:8080/recruitingPlayers/joinActive',
				// 	method:'POST',
				// 	data:{
				// 	  "beginTime": "string",
				// 	  "content": "string",
				// 	  "endTime": "string",
				// 	  "id": id,
				// 	  "name": "string",
				// 	  "no": this.no,
				// 	  "phone": "string",
				// 	  "place": "string",
				// 	  "sponsor": "string",
				// 	  "type": "string"
				// 	},
				// 	success: (rp) => {
				// 		console.log(rp)
				// 	}
				// })
				uni.showModal({
					title:'提示',
					content:'确定报名吗',
					success: (sn) => {
						if(sn.confirm){
							uni.getStorage({
								key:'student',
								success: (student1) => {
									this.student=student1,
									console.log(this.student.data.no),
									uni.request({
										url:'http://120.77.247.146:8080/recruitingPlayers/joinActive',
										method:'POST',
										data:{
											"id":id
										},
										success: (pes) => {
											console.log(pes)
											if(pes.data.resultCode==400){
												uni.showToast({
													title:"已报名过该招募!"
												})
											}
											else{
												uni.showToast({
													title:"报名成功!"
												})
											}
										}
									})
								}
							})
						}
					}
				})
			},
			setCurr(e) {
			// console.log(e.detail.current)
			let thisCurr = e.detail.current || e.currentTarget.dataset.index || 0;
			// console.log(thisCurr)
			this.curr = thisCurr;
			},
			messagesearch(event){
				console.log(event.target.value);
				uni.request({
					url:'http://120.77.247.146:8080/recruitingPlayers/searchPlayers',
					method:'POST',
					data:{
						"name":event.target.value,
					},
					success: (res) => {
						this.res={},
						console.log(res),
						this.res=res
					}
				})
			},
		}
	}
</script>
<style>
	input{
		border: 1rpx solid #000000;
	}
	.bigbox1{
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
		background-color: #f8f8f8;
		/* overflow:hidden; */
	}
	.time_and_unit{
		border-radius: 20rpx;
		background-color: white;
	}
	.bhome{
		margin-top: 11%;
	}
	swiper-item{
		overflow: auto;
	}
	.bigbox{
		position: fixed;
		width: 100%;
		height: 95%;
	}
	.bigbox .item{
		display: flex;
		padding: 25rpx 0;
		border-bottom: 2rpx #eee solid;
		padding-left: 30rpx;
	}
	.bigbox .item:last-child{
		margin-bottom: 100rpx;
	}
	.bigbox .item .info{
		flex: 1;
	}
	.bigbox .item .activity_title{
		font-size: 36rpx;
		color: #212121;
		padding-bottom: 20rpx;
		font-weight: 600;
	}
	.bigbox .item .activity_deadline,
	.bigbox .item .activity_resp
	{
		color: #424242;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}
	.bigbox .item .activity_deadline .title,
	.bigbox .item .activity_resp .title{
		display: inline-block;
		color: #616161;
		margin-right: 30rpx;
	}
	.bigbox .item .item_btn{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: center;
	}
	.bigbox .item .item_btn .apply navigator,
	.bigbox .item .item_btn .detail navigator{
		display: inline-block;
		padding: 10rpx 23rpx;
		border-radius: 3px;
		background-color: #2196F3;
		margin-top: 20rpx;
		margin-right: 30rpx;
		color: #fff;
		font-size: 25rpx;
	}
	.bigbox .item .item_btn .detail navigator{
		background-color: #fff;
		border: 2rpx solid #2196F3;
		color: #2196F3;
	}
	
	.big{
		width: 100%;
		height: 100%;
	}
	.Vertical_line{
		background-color: black;
		width: 1rpx;
		height: 35%;
		margin: 0 6rpx 0 6rpx;
		opacity: 0;
	}
	.detail{
		color: #007AFF;
	}
	.startzhaomu button{
		text-align: center;
		width: 500rpx;
		color: #ffffff;
		margin-top: 50rpx;
		background-color: #007AFF;
	}
	.nameInput{
		height: 60rpx;
		font-size: 38rpx;
		width: 80%;
		overflow: auto;
	}
	.details{
		/* margin-top: 50rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.details textarea{
		color: #000000;
		width: 80%;
		height: 1000rpx;
		overflow: auto;
	}
	.second_box{
		width: 100%;
		/* height: 5%; */
		display: flex;
		justify-content: center;
		/* position: fixed; */
		/* height: 12%; */
		background-color: rgb(244,244,244);
		margin: 0;
		margin-top: 1%;
	}
	.third_box{
		/* background-color: #007AFF; */
		width: 24%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		text-align: center;
	}
	.second_box_third{
		height: 100rpx;
		width: 98%;
		/* background-color: #3ECCCC; */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.search{
		height: 6%;
		width: 100%;
		display: flex;
		position: fixed;
		margin: 0;
		top:0;
		justify-content: center;
		align-items: center;
		border-radius: ;
	}
	.search input{
		border-top-left-radius: 12rpx;
		border-bottom-left-radius: 12rpx;
		width: 70%;
		border: 4rpx solid #2196F3;
	}
	.search_in{
		height: 70rpx;
		width: 100%;
		margin: 0;
		padding: 0;
		/* background-color: red; */
	}
	.search_but{
		background-color: #2196F3;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
	}
	.search .search_but button{
		background-color: #2196F3;
		margin: 0;
		padding: 0;
		width:80px;
		height:78rpx; 
		color:white;
		font-size: 16px;
	}
	.search button.active{
		
	}
	.title{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}
	.unit{
		width: 100%;
		display: flex;
	}
	.cent{
		width: 100%;
		display: flex;
		margin-top: 50rpx;
	}
	.lab{
		width: 30%;
		color: #757575;
		margin-right: 30rpx;
		/* float: right; */
	}
	.ins{
		width:70%;
		display: flex;
	}
	.bgtime,.edtime{
		width: 190rpx;
	}
	.time{
		display: flex;
	}
	.lab label{
		float: right;
	}
	textarea{
		
		border:1rpx solid #000000;
	}
	.trade{
		width: 100%;
		color: #000000;
		display: flex;
		overflow: auto; 
	}
	.trade view{
		height: auto;
		text-align: center;
		width: 50%;
		float: left;
	}
	.trade .texts.active{
		border-bottom: 8upx solid #2196F3;
	}
</style>

